<template>
  <div v-loading="loading" class="type-detail-wrap">
    <el-table v-if="tableData.length" :data="tableData" style="width: 100%" border>
      <el-table-column prop="index" label="序号" min-width="50"/>
      <el-table-column prop="name" label="基础类型" min-width="100"/>
      <el-table-column prop="id" label="ID" min-width="180"/>
      <el-table-column prop="code" label="编码" min-width="100"/>
      <el-table-column prop="state" label="状态" min-width="100">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.state === 1" type="success">正常</el-tag>
          <el-tag v-show="scope.row.state === 0" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="switch" label="操作" min-width="400">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleDelete(scope)">查看子类型</el-button>
          <el-button type="primary" @click="handleModification(scope)">修改类型</el-button>
          <el-button type="primary" @click="handleAddItem(scope)">添加子类型</el-button>
          <el-button type="primary" @click="handleBack">返回上一层</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>10" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog :modal-append-to-body="false" :visible.sync="dialogAddVisible" title="添加子类型">
      <el-form :model="child">
        <el-form-item label="数据ID" label-width="200px">
          <el-input v-model="child.id" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="编码" label-width="200px">
          <el-input v-model="child.code" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="排序码" label-width="200px">
          <el-input v-model="child.codesort" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="名称" label-width="200px">
          <el-input v-model="child.name" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :modal-append-to-body="false" :visible.sync="dialogFormVisible" title="修改类型">
      <el-form :model="form">
        <el-form-item label="数据ID" label-width="200px">
          <el-input v-model="form.id" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="数据名称" label-width="200px">
          <el-input v-model="form.name" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="排序码" label-width="200px">
          <el-input v-model="form.codesort" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="状态" label-width="200px">
          <el-radio v-model="form.state" label="1">正常</el-radio>
          <el-radio v-model="form.state" label="0">禁用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <div v-show="!list.length && !loading" class="emt">没有子类型</div>
  </div>
</template>
<script>
import { findChild, update, addDictionary, checkCode, find } from '@/api/data'
import Pagination from '@/components/Pagination'
export default {
  name: 'BasicTypeDetail',
  components: {
    Pagination
  },
  data() {
    return {
      value: '',
      id: '',
      currentIndex: 0,
      list: [],
      loading: false,
      form: {
        id: '',
        name: '',
        state: '1',
        codesort: '',
        code: ''
      },
      child: {
        id: '',
        name: '',
        codesort: '',
        code: ''
      },
      dialogFormVisible: false,
      dialogAddVisible: false,
      pid: '',
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  computed: {
    tableData() {
      const result = []
      const len = this.list.length
      this.list.map((item, index) => {
        result.push({
          index: len - index,
          name: item.name,
          pid: item.pid,
          code: item.code,
          id: item.id,
          state: item.state,
          codesort: item.codesort
        })
      })
      return result.reverse()
    }
  },
  created() {
    this.getChildren()
  },
  methods: {
    getChildren() {
      const { id } = this.$route.query
      this.findChildItem(id)
    },
    findChildItem(id, iDisplayStart = 0, size = 10) {
      console.log(111)
      this.loading = true
      findChild(id, iDisplayStart, size)
        .then((res) => {
          this.list = []
          this.pid = id
          if (res.data.length) {
            this.list = res.data
            this.total = res.total
          } else {
            this.$message.warning({ duration: 3000, message: '没有子类型' })
            setTimeout(() => {
              this.handleBack()
            }, 3000)
          }
          this.loading = false
        }).catch((res) => {
          this.$message.warning({
            duration: 1000,
            message: res.msg
          })
          this.loading = false
        })
    },
    handleDelete(scope) {
      const { id } = scope.row
      this.listQuery.page = 1
      this.listQuery.limit = 10
      this.findChildItem(id)
    },
    handleModification(scope) {
      this.dialogFormVisible = true
      const { id, name, codesort } = scope.row
      this.form = {
        id,
        name,
        codesort
      }
      this.form.state = scope.row.state.toString()
    },
    check() {
      const { id, name } = this.form
      if (id.trim() === '') {
        this.$message.warning({
          duration: 1000,
          message: 'id不能为空'
        })
        return false
      }
      if (name.trim() === '') {
        this.$message.warning({
          duration: 1000,
          message: '名称不能为空'
        })
        return false
      }
      return true
    },
    handleSubmit() {
      const flag = this.check()
      flag ? this.modification() : ''
      this.dialogFormVisible = false
    },
    modification() {
      const { id, name, codesort, state } = this.form
      update(id, name, codesort, state)
        .then((res) => {
          if (res.success) {
            this.$message.success({
              duration: 1000,
              message: '修改成功'
            })
            this.findChildItem(this.pid)
          } else {
            this.$message.warning({
              duration: 1000,
              message: '稍后再试'
            })
          }
        }).catch((e) => {
          this.$message.warning({
            duration: 1000,
            message: '稍后再试'
          })
        })
    },
    handleAddItem(scope) {
      const { id } = scope.row
      this.child = {
        id
      }
      this.dialogAddVisible = true
    },
    handleAdd() {
      const flag = this.checkChild()
      flag ? this.checkData() : ''
    },
    checkChild() {
      const { id, name } = this.child
      if (id.trim() === '') {
        this.$message.warning({
          duration: 1000,
          message: '数据ID不能为空'
        })
        return false
      }
      if (name.trim() === '') {
        this.$message.warning({
          duration: 1000,
          message: '名称不能为空'
        })
        return false
      }
      if (name.trim() === '') {
        this.$message.warning({
          duration: 1000,
          message: '名称不能为空'
        })
        return false
      }
      return true
    },
    checkData() {
      const { code } = this.child
      checkCode(code)
        .then((res) => {
          if (res.success) {
            this.addData()
          } else {
            this.$message.warning({
              duration: 1000,
              message: res.msg
            })
            return
          }
        }).catch((res) => {
          this.$message.warning({
            duration: 1000,
            message: '请稍后再试'
          })
        })
    },
    addData() {
      const { name, code } = this.child
      const pid = this.child.id
      addDictionary(pid, code, name)
        .then((res) => {
          res = res.data
          this.$message.success({
            duration: 1000,
            message: '添加成功'
          })
        }).catch((res) => {
          res = res.data
          this.$message.warning({
            duration: 1000,
            message: res.msg
          })
        })
      // this.dialogAddVisible = false
    },
    handleBack() {
      this.listQuery.page = 1
      this.listQuery.limit = 10
      find(this.pid)
        .then((res) => {
          Number(res.pid) === -1 ? this.$router.push({ path: '/basic/type' }) : this.findChildItem(res.pid)
        })
    },
    getList(pagination) {
      this.listQuery.page = pagination.page
      this.listQuery.limit = pagination.limit
      const iDisplayStart = pagination.page === 1 ? 0 : (pagination.page - 1) * pagination.limit
      const size = pagination.limit
      this.findChildItem(this.pid, iDisplayStart, size)
    }
  }
}
</script>
<style lang="scss" scoped>
.type-detail-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  z-index: 20;
  .emt {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
